<!-- templates/order_history.html -->
{% extends 'base.html' %}
{% block content %}
<style>
    .modal-dialog-centered {
        display: flex;
        align-items: center;
        min-height: calc(100vh - 64px); /* 减去 header/footer 高度 */
    }
</style>

<div class="container py-5">
    <h3 class="mb-4 text-center">📦 我的订单历史</h3>

    <!-- 搜索表单 -->
    <form method="get" action="{% url 'order_history' %}" class="mb-4">
        <div class="input-group">
            <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="请输入商品名称或收货地址进行搜索...">
            <button class="btn btn-outline-secondary" type="submit">搜索</button>
        </div>
    </form>

    {% if orders %}
    <div class="table-responsive">
        <table class="table table-hover">
            <thead class="table-light">
                <tr>
                    <th>商品名称</th>
                    <th>下单时间</th>
                    <th>原材料来源</th>
                    <th>商品图片</th>
                    <th>检验批次</th>
                    <th>收货地址</th>
                    <th>数量</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for order in orders %}
                <tr>
                    <td>{{ order.product.raw_material_source|truncatechars:30 }}</td>
                    <td>{{ order.created_at }}</td>
                    <td>{{ order.product.raw_material_source }}</td>
                    <td>
                        {% if order.product.product_image %}
                            <img src="{{ order.product.product_image.url }}" alt="商品图片" width="60" class="rounded">
                        {% else %}
                            <span class="text-muted">无图片</span>
                        {% endif %}
                    </td>
                    <td>{{ order.product.inspection_batch }}</td>
                    <td>{{ order.shipping_address }}</td>
                    <td>{{ order.quantity }}</td>
                    <td>{{ order.get_status_display }}</td>
                    <td>
                        {% if order.status == 'pending' %}
                        <button type="button" class="btn btn-sm btn-outline-danger"
                                data-bs-toggle="modal"
                                data-bs-target="#cancelOrderModal"
                                data-order-id="{{ order.id }}"
                                data-product-name="{{ order.product.raw_material_source|truncatechars:30 }}">
                          取消订单
                        </button>
                        {% else %}
                        -
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 分页导航 -->
    <nav aria-label="订单分页">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.previous_page_number }}">上一页</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
            {% endif %}

            {% for num in paginator.page_range %}
                {% if num == page_obj.number %}
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">{{ num }}</a>
                    </li>
                {% else %}
                    <li class="page-item">
                        <a class="page-link" href="?q={{ query }}&page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?q={{ query }}&page={{ page_obj.next_page_number }}">下一页</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
            {% endif %}
        </ul>
    </nav>

    <!-- 取消订单确认模态框 -->
    <div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cancelOrderModalLabel">确认取消订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要取消以下订单吗？</p>
                    <p><strong>商品：</strong><span id="modal-product-name"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <a id="confirm-cancel-btn" class="btn btn-danger">确认取消</a>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <div class="alert alert-info text-center mt-5">
        没有匹配的订单。
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var cancelOrderModal = document.getElementById('cancelOrderModal');
    cancelOrderModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var orderId = button.getAttribute('data-order-id');
        var productName = button.getAttribute('data-product-name');

        var modalBody = cancelOrderModal.querySelector('.modal-body');
        modalBody.querySelector('#modal-product-name').textContent = productName;

        var confirmBtn = cancelOrderModal.querySelector('#confirm-cancel-btn');
        confirmBtn.href = "{% url 'cancel_order' 0 %}".replace("0", orderId);
    });
});
</script>
{% endblock %}
